<template>
  <div class="email">
    <el-form label-position="top"
             label-width="100px"
             :model="formLabelAlign">
      <el-form-item label="邮箱地址">
        <el-input v-model="formLabelAlign.email" />
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="formLabelAlign.title" />
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="formLabelAlign.content"
                  :rows="5"
                  resize="none"
                  type="textarea"
                  placeholder="请输入邮件内容，支持html..." />
      </el-form-item>
    </el-form>
    <div class="sendMail">
      <el-button type="primary"
                 @click="preview">预览</el-button>
      <el-button type="primary"
                 @click="sendMail">发送邮件</el-button>
    </div>
  </div>
  <el-dialog v-model="previewShow"
             title="预览"
             width="50%"
             center
             :close-on-click-modal="false">
    <el-scrollbar height="50vh">
      <div v-html="formLabelAlign.content"></div>
    </el-scrollbar>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="previewShow = false">关闭</el-button>
        <el-button type="primary"
                   @click="sendMail">发送</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang='ts'>
import {
  ComponentInternalInstance,
  getCurrentInstance,
  reactive,
  ref,
} from "vue";
import { ElMessageBox } from "element-plus";

export default {
  setup() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const previewShow = ref(false);
    const formLabelAlign = reactive({
      email: "",
      title: "",
      content: "",
    });
    const preview = () => {
      if (formLabelAlign.content.length !== 0) previewShow.value = true;
      else
        ElMessageBox.alert("警告：请输入邮件内容", {
          center: true,
          showClose: false,
        }).then(() => {});
    };
    const sendMail = () => {
      proxy
        .axios({
          url: "/auth/groupMail",
          method: "post",
          headers: {
            auth: "yzjgroup",
          },
          data: {
            subject: formLabelAlign.title,
            message: formLabelAlign.content,
            to: formLabelAlign.email,
          },
        })
        .then(({ data }) => {
          if (data.code === 0) {
            ElMessageBox.alert("发送成功！", {
              center: true,
              showClose: false,
            }).then(() => {
              formLabelAlign.email = "";
              formLabelAlign.title = "";
              formLabelAlign.content = "";
            });
          } else {
            ElMessageBox.alert("发送失败！原因：" + data.msg, {
              center: true,
              showClose: false,
            }).then(() => {});
          }
        })
        .catch(() => {
          ElMessageBox.alert("发送失败！", {
            center: true,
            showClose: false,
          }).then(() => {});
        })
        .finally(() => {
          previewShow.value = false;
        });
    };
    return { formLabelAlign, sendMail, preview, previewShow };
  },
};
</script>

<style lang="less" scoped>
.email {
  .sendMail {
    margin-top: 50px;
  }
}
.utils {
}
</style>